<script setup>
import { ref, reactive } from "vue";

// 1. 抽屉显隐控制（初始隐藏）
const visibleDrawer = ref(false);

// 2. 存储政策信息（初始化空对象，避免渲染报错）
const policy = reactive({
  policyId: "",
  title: "政策详情",
  content: "<p>暂无政策内容</p>",
  policyType: "未分类",
  publishTime: "未标注",
  publisher: "未知单位", // 补充字段名：原数据"发布单位"对应字段名推测为publisher
  publisherId: "",
  status: 1, // 默认正常状态
  viewCount: 0,
});

// 3. 打开抽屉：接收行数据并赋值，处理数据安全性
const handleOpen = async (row) => {
  if (!row) return; // 防止空数据传入导致报错

  // 深拷贝行数据，避免直接修改原数据；同时处理字段默认值
  Object.assign(policy, {
    policyId: row.policyId || "",
    title: row.title || "政策详情",
    content: row.content || "<p>暂无政策内容</p>",
    policyType: row.policyType || "未分类",
    publishTime: row.publishTime || "未标注",
    publisher: row.publisher || "未知单位", // 与"发布单位"字段对应
    publisherId: row.publisherId || "",
    status: row.status ?? 1, // 状态用空值合并，0（禁用）需保留
    viewCount: row.viewCount || 0,
  });

  visibleDrawer.value = true;
};

// 4. 关闭抽屉：隐藏抽屉并重置政策数据
const handleCancel = () => {
  visibleDrawer.value = false;
  // 重置为初始状态，避免下次打开时残留旧数据
  Object.assign(policy, {
    policyId: "",
    title: "政策详情",
    content: "<p>暂无政策内容</p>",
    policyType: "未分类",
    publishTime: "未标注",
    publisher: "未知单位",
    publisherId: "",
    status: 1,
    viewCount: 0,
  });
};

// 5. 暴露方法给父组件调用
defineExpose({
  handleOpen,
  visibleDrawer, // 可选：暴露显隐状态，方便父组件控制
});
</script>

<template>
  <div class="informationDetail">
    <!-- 抽屉组件：从下往上弹出（btt），占满屏幕宽度 -->
    <el-drawer
      v-model="visibleDrawer"
      direction="btt"
      size="100%"
      @close="handleCancel"
      class="product-drawer"
      :close-on-click-modal="false"
      :before-close="handleCancel"
    >
      <!-- 政策头部信息：标题 + 基础元数据 -->
      <div class="policy-header">
        <!-- 政策标题 -->
        <h2 class="policy-title">{{ policy.title }}</h2>

        <!-- 政策元数据（发布时间、类型、发布单位、查看次数、状态） -->
        <!-- <div class="policy-meta">
          <span class="meta-item">
            <i class="el-icon-time"></i>
            {{ policy.publishTime }}
          </span>
        </div> -->
      </div>

      <!-- 政策内容区域：处理HTML富文本，添加样式隔离 -->
      <div class="policy-content">
        <div v-html="policy.content" class="rich-content"></div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}

// 抽屉整体样式：控制内边距和滚动
.product-drawer {
  --el-drawer-padding-primary: 0; // 清除默认内边距，自定义布局

  .el-drawer__body {
    padding: 10px 20px;
    overflow-y: auto; // 内容超出时可滚动
    max-height: calc(100vh - 100px); // 限制内容区最大高度
    display: flex;
    justify-content: center; // 使内容容器水平居中
    flex-direction: column; // 垂直方向排列
    align-items: center; // 水平方向居中对齐
  }
}

// 政策头部样式
.policy-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee; // 分隔线，区分头部和内容
  max-width: 1200px; // 限制最大宽度，避免大屏过宽
  width: 100%; // 占满可用宽度
  text-align: center; // 文本内容居中

  .policy-title {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
  }

  .policy-meta {
    display: flex;
    flex-wrap: wrap; // 自适应换行
    gap: 16px 24px; // 横向间距24px，纵向间距16px
    color: #6b7280;
    font-size: 14px;
    justify-content: center; // 元数据项居中排列

    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px; // 图标与文字间距

      .el-icon {
        font-size: 14px;
      }
    }

    // 状态标签样式
    .status-normal {
      color: #10b981; // 正常状态-绿色
    }
    .status-disabled {
      color: #9ca3af; // 禁用状态-灰色
    }
  }
}

// 政策内容样式（富文本容器）
.policy-content {
  max-width: 1200px; // 与头部保持一致宽度
  width: 100%; // 占满可用宽度
  padding: 0 140px; // 增加内边距，避免边缘内容紧贴

  .rich-content {
    line-height: 1.8;
    color: #374151;
    font-size: 16px;

    // 处理富文本中的常见标签样式
    p {
      margin: 0 0 16px;
      text-align: center; // 段落文本居中
    }
    h3,
    h4,
    h5 {
      margin: 24px 0 16px;
      font-weight: 600;
      text-align: center; // 标题居中
    }
    ul,
    ol {
      margin: 0 auto 16px; // 列表容器居中
      padding: 0;
      width: fit-content; // 列表宽度适应内容
      text-align: left; // 列表项文本左对齐，符合阅读习惯
    }
    img {
      max-width: 100%; // 图片自适应容器宽度
      height: auto;
      margin: 16px auto; // 图片水平居中
      border-radius: 4px; // 轻微圆角
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 图片添加轻微阴影
    }
    // 链接样式
    a {
      color: #3b82f6;
      text-decoration: underline;
    }
    // 表格样式
    table {
      margin: 16px auto;
      border-collapse: collapse;
      min-width: 60%;
    }
    table th,
    table td {
      border: 1px solid #ddd;
      padding: 8px 12px;
      text-align: center;
    }
    table th {
      background-color: #f9fafb;
      font-weight: 600;
    }
  }
}
</style>
